<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的活动</title>
    <!-- 引入样式 -->
    <link rel="shortcut icon" href="../../../images/favicon.ico">
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../../styles/common.css"/>
    <link rel="stylesheet" href="../../../styles/page.css"/>
    <link rel="stylesheet" href="../../../styles/bttn.min.css"/>
    <link rel="stylesheet" href="../../../styles/indexF.css"/>


    <style>
        #member-app .notAdmin::after {
            border: 0 !important;
        }
    </style>
</head>
<body style="background-color: #ffffff">
<div class="dashboard-container" id="activity-app">
    <el-header>
        <el-menu :default-active="defAct" mode="horizontal" style="margin-left: 50px">
            <el-menu-item index="1">
                <div style="margin-right: 20px">
                    <img src="../../../images/front.webp" style="width: 283.8px;height: 60px">
                </div>
            </el-menu-item>
            <el-menu-item
                    v-for="item in menuList"
                    :index="item.id"
                    :key="item.id"
                    @click="menuHandle(item)"
                    style="margin-left: 80px"
            >
                <span slot="title" style="font-size: 30px">{{item.name}}</span>
            </el-menu-item>
            <el-menu-item style="margin-left: 30px">
                <el-button icon="el-icon-switch-button" round @click="logout()">
                    <span style="font-size: 20px">
                        注销
                    </span>
                </el-button>
            </el-menu-item>
        </el-menu>
    </el-header>
    <div class="container">
        <div class="tableBar">
            <div class="infinite-list" v-infinite-scroll="load" style="overflow:auto;width: 1400px">
                <el-input v-model="input"
                          placeholder="输入已报名的活动名称搜索"
                          style="width: 250px;height: 50px;margin-left: 200px"
                          clearable
                          @keyup.enter.native="handleQuery"
                >
                    <i slot="prefix"
                       class="el-input__icon el-icon-search"
                       style="cursor: pointer"
                       @click="handleQuery"
                    ></i>
                </el-input>
                <el-table
                        :show-header="Hstatus"
                        :data="tableData"
                        style="width: 80%;margin-left: 200px"
                        :header-cell-style="{background:'#ffffff',color:'#606266',lineHeight:'100px',fontSize:'30px'}"
                >
                    <el-table-column
                            prop="activityCover"
                            width="180"
                            label="活动封面">

                        <span slot="label" style="font-size: 25px">
                            活动封面
                        </span>
                        <template slot-scope="scope">
                            <img
                                    v-if="imageUrl"
                                    :src="imageUrlHandle(scope.row.activityCover)"
                                    class="avatar"
                                    style="width: 100px;height: 100px"
                            ></img>
                            <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="activityTitle"
                            width="180"
                            label="活动名称">
                        <span slot="label" style="font-size: 25px">
                            活动名称
                        </span>
                        <template slot-scope="scope">
                            <div style="font-size: 20px">
                                {{ scope.row.activityTitle}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="activityDate"
                            width="180"
                            label="活动日期">
                        <span slot="label" style="font-size: 25px">
                            活动日期
                        </span>
                        <template slot-scope="scope">
                            <div style="font-size: 20px">
                                {{ scope.row.activityDate}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="activityIntro"
                            width="180"
                            label="活动简介">
                        <span slot="label" style="font-size: 25px">
                            活动简介
                        </span>
                        <template slot-scope="scope">
                            <div style="font-size: 20px">
                                {{ scope.row.activityIntro}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="medium" class="blueBug" @click="handleDialog(scope.row)"
                                       icon="el-icon-info">活动详情
                            </el-button>
                        </template>
                    </el-table-column>

                    <el-table-column>
                        <template slot-scope="scope">
                            <el-button @click="regisHandle(scope.row.id)" v-if="scope.row.isEngaged == 'false' "
                                       type="primary" round>
                                <span style="font-size: 16px;font-weight: bolder">
                                    报名
                                </span>
                            </el-button>
                            <el-button type="success" icon="el-icon-check" v-if="scope.row.isEngaged == 'true' " round>
                                已报名
                            </el-button>
                            <el-button type="warning" v-if="scope.row.isEngaged == 'true' " round
                                       @click="cancelRegisHandle(scope.row.id)">
                                取消报名
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog
                        title="详细信息"
                        :visible.sync="dialogVisible"
                        width="50%"
                        :before-close="handleClose"
                        append-to-body
                >
                    <div style="height: 300px">
                                <span slot="label" style="font-size: 20px;color: #99857E;font-weight: bolder">
                                    活动名称: {{this.dialogTitle}}
                                </span>
                        <br/><br/>
                        <span slot="label" style="font-size: 20px;color: #99857E;font-weight: bolder">
                                        活动地点: {{this.dialogAdd}}
                                    </span>
                        <br/><br/>
                        <span slot="label" style="font-size: 20px;color: #99857E;font-weight: bolder">
                                    活动日期: {{this.dialogDate}}
                                </span>
                        <br/><br/>
                        <span slot="label" style="font-size: 20px;color: #99857E;font-weight: bolder">
                                        活动开始时间: {{this.dialogBTime}}
                                    </span>
                        <br/><br/>
                        <span slot="label" style="font-size: 20px;color: #99857E;font-weight: bolder">
                                        活动结束时间: {{this.dialogETime}}
                                    </span>
                        <br/><br/>
                        <span slot="label" style="font-size: 20px;color: #99857E;font-weight: bolder">
                                    活动内容: {{this.dialogContent}}
                                </span>
                        <br/><br/>
                    </div>

                    <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                              </span>
                </el-dialog>
            </div>
        </div>
    </div>
    <el-footer>
        <div style="margin-left: 700px;font-size: 20px;color: black;font-weight: bolder">
            xupt@04204006
        </div>
    </el-footer>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>
<script src="../../../api/activity.js"></script>
<script src="../../../api/volunteer.js"></script>
<script src="../../../api/match.js"></script>
<script>
    new Vue({
        el: '#activity-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                activityStatus: '',
                matchInfo: {
                    activityId: '',
                    volunteerId: ''
                },
                allOrOwn: '',
                imageUrl: '/common/download?name=',
                dialogVisible: false,
                dialogTitle: '',
                dialogAdd: '',
                dialogDate: '',
                dialogBTime: '',
                dialogETime: '',
                dialogContent: '',
                Hstatus: false,

                defAct: '3',
                menuList: [
                    {
                        id: '2',
                        name: '活动首页',
                        //activity————————————————————————————————————————————————————————member
                        url: 'list.html',
                        icon: 'icon-member'
                    },
                    {
                        id: '3',
                        name: '我的活动',
                        url: 'ownList.html',
                        icon: 'icon-category'
                    },
                    {
                        id: '4',
                        name: '账号信息',
                        url: 'info.html',
                        icon: 'icon-category'
                    },
                ],
                //activity————————————————————————————————————————————————————————member
                iframeUrl: 'page/volunteerCenter/list.html',
                loading: false,
                timer: null,
            }
        },
        computed: {},
        created() {
            if (window.localStorage.getItem('userInfo') === null) {
                window.location.href = '../../login/loginFront.html'
            }
            this.init()
            this.userId = JSON.parse(localStorage.getItem('userInfo')).id
        },
        mounted() {
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    activityName: this.input ? this.input : '',
                    volunteerId: JSON.parse(localStorage.getItem('userInfo')).id,
                    allOrOwn: 'own'
                }

                await getUserActivityList(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            handleClose() {

            },
            regisHandle(ActId) {
                this.matchInfo.activityId = ActId
                this.matchInfo.volunteerId = this.userId
                this.$confirm('确认报名?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    regis(this.matchInfo).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '报名成功!'
                            });
                            this.init()
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消报名'
                    });
                });
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            cancelRegisHandle(st) {
                const params = {
                    volunteerId: this.userId,
                    activityId: st
                }
                this.$confirm('确认取消报名?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    cancelRegis(params).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '取消报名成功!'
                            });
                            this.init()
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
                this.init()
            },
            load() {

            },
            imageUrlHandle(url) {
                return '/common/download?name=' + url;
            },
            handleDialog(st) {
                this.dialogTitle = st.activityTitle
                this.dialogAdd = st.activityAddress
                this.dialogDate = st.activityDate
                this.dialogBTime = st.activityBtime
                this.dialogETime = st.activityEtime
                this.dialogContent = st.activityContent
                this.dialogVisible = true
            },
            //--------------------

            logout() {
                logoutApi().then((res) => {
                    if (res.code === 1) {
                        localStorage.removeItem('userInfo')
                        window.location.href = '../../login/loginFront.html'
                    }
                })
            },
            menuHandle(item) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                window.location.href = item.url
                this.closeLoading()
            },
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 1000)
            },
        }
    })
</script>
</body>
</html>